<template>
	<div>
	<view class="show" >
		<view class="show-box" v-for="item in scenicList" :key='item.id'>
			<view class="">
				景区名称：<span style="font-weight: 600; font-size: 24px;">{{item.jqname}}</span>
			</view>
			<div style="display: flex; margin-bottom: 5px;"   @click="lmsk(item.jqid)">
				<img :src="item.jqimages" alt="" >
				
				<div style=" overflow:auto;margin-left: 10px;">
					
				<view>{{ item.jqxuzhi}}</view>
			</div>
			</div>			
			     <span class="" style="display: flex;justify-content:space-between;"><view class="" style="width: 80%;">
			     	<span>地址：</span>{{item.jqaddress }}
			     </view>
				 <button style="width: 60px; font-size: 16rpx; line-height: 30px; color: red;" @click="handleAdd(item)">点击预定</button>
				 </span>
	
		</view>
	</view>
		
			
			<view class="fotter">没有更多了......</view>
			
			
		</view>
		
	</div>
</template>

<script>
	import store from '../../store/index.js'
	export default {
		data () {
			return {
				
				scenicList:[]
			}
		},
		onLoad () {
			store.commit('getChange')
		},
		onShow () {
		this.fetchScenicList()	
			store.state.innerAudioContext.play() // 首页播放
		},
	
		methods: {
			nav (id) {
				store.state.innerAudioContext.pause()
				uni.navigateTo({
					url: `/pages/particulars/index?id=${id}` 
				})
			},
			recommend (id) {
				console.log(id);
				store.state.innerAudioContext.pause()
				uni.navigateTo({
					url: `/pages/local/index?id=${id}` 
				})
				
			},
			ljs () {
				store.state.innerAudioContext.pause()
				uni.navigateTo({
					url: `/pages/components/ljs` 
				})
			},
		handleAdd(row){
			const userId = uni.getStorageSync('userId');
			uni.request({
			   url: 'http://124.223.111.96:80/order/add',
			   method: 'POST',
			   data:{orderspid:row.jqid,ordertype:1,userid:userId ,kflx:row.hoteltype,orderprice:row.jqprice,orderimages:row.jqimages,ordername:row.jqname},
			   success: (res) => {
			     console.log(res)
				 uni.showToast({
				     title: '景点预定成功',
				     icon: 'success',
				     duration: 2000
				 });
				 this.fetchScenicList ()
			   },
			   fail: (err) => {
			     console.error('Error fetching data:', err);
			   }
			 });
		},
		fetchScenicList (){
			     uni.request({
			        url: 'http://124.223.111.96:80/scenic/getAll',
			        method: 'GET',
			        success: (res) => {
			          console.log(res.data.data);
					  this.scenicList= res.data.data
			        },
			        fail: (err) => {
			          console.error('Error fetching data:', err);
			        }
			      });
		},
			
			
	
		},
		onMounted() {
			
		},
		// 转发 点击右上角的三个点
			
		
	}
</script>

<style >
	h2 {
		text-align: center;
		margin: 20rpx 0 10rpx 0;
		color: #f00;
	}
	.banner {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 460rpx;
	}
	.swiper .swiper-item img {
		height: 300px;
		width: 100%;
		background-size: contain;
	}
	
	.recommend {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}
	
	.local {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.local view {
		margin-top: 10rpx;
	}
	
	.recommend img {
		width: 100rpx;
		height: 100rpx;
	}
	
	.person {
		margin-top: 40rpx;
	}

	.per-tj {
		display: flex;
		align-items: center;
	}

	.per-tj img {
		width: 100rpx;
		height: 100rpx;
	}
	.show {
		/* display: flex; */
		width: 750rpx;
	}
	.show-box {
		 border: 1px solid #ccc;
	padding: 10px;
	background-color: #e7e7e7;
	}
	.show-box view {
		/* text-align: center; */
	
		height: 60rpx;
		line-height: 60rpx;
	}
	.show-box img {
		width: 200px;
		height: 300rpx;
	}
	.show-box img:nth-child(2) {
		margin-left: 10rpx;
	}
	.fotter {
		margin-left: 10px;
		    color: #ccc;
		    margin-top: 10px;
	}
	
</style>
